<template>
    <div style="position: relative">
      <div ref="Orders" style=" width: 100%; height: calc(100vh - 355px) "></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts/core";
  import {
    TooltipComponent,
    LegendComponent,
    TitleComponent,
  } from "echarts/components";
  import { PieChart } from "echarts/charts";
  import { LabelLayout } from "echarts/features";
  import { CanvasRenderer } from "echarts/renderers";
  import { getSalesOrders } from "@/apis/dataSreening/salesData";
  echarts.use([
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout,
    TitleComponent,
  ]);
  
  export default {
    data() {
      return {};
    },
    mounted() {
      this.drawpie();
    },
    methods: {
      drawpie() {
        getSalesOrders()
          .then(({ data }) => {
            var chartDom = this.$refs.Orders;
            var myChart = echarts.init(chartDom);
            var option;
  
            option = {
              title: {
                text: "季度利润占比",
                show: true,
                right: "0%",
              },
              legend: {
                show: true,
                left: "0",
                orient: "vertical",
                textStyle: {
                  fontSize: "13px",
                },
              },
              tooltip: {
                trigger: "item",
              },
              series: [
                {
                  type: "pie",
                  radius: ["0%", "95%"],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                  },
                  label: {
                    show: false,
                    position: "center",
                  },
                  labelLine: {
                    show: false,
                  },
                  data:[{"value":150,"name":"第一季度"},{"value":180,"name":"第二季度"},{"value":120,"name":"第三季度"},{"value":50,"name":"第四季度"}],
                },
              ],
            };
  
           myChart.setOption(option);
          })
          .catch(() => {});
      },
    },
  };
  </script>
  
  <style>
  </style>